<template>
    <div class="container-fluid">
        <div class="jumbotron" style="margin-top: 20px;">
            <div class="container-fluid">
                <h1>vxe-table示例</h1>
                <p>vue第三方组件库</p>
                <p>
                    <a class="btn btn-primary btn-lg" target="_blak"
                       href="https://vxetable.cn/">学习更多</a>
                </p>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">
                    基础组件示例
                    <i class="fa fa-user"></i>
                    <i class="vxe-icon--refresh roll"></i>
                </h3>
            </div>
            <div class="panel-body">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">按钮</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <vxe-button @click="message();">默认按钮</vxe-button>
                            <vxe-button size="medium">中等按钮</vxe-button>
                            <vxe-button size="small">小按钮</vxe-button>
                            <vxe-button size="mini">超小按钮</vxe-button>
                            <vxe-button status="primary">主要颜色按钮</vxe-button>
                            <vxe-button status="info">信息颜色按钮</vxe-button>
                            <vxe-button status="success">成功颜色按钮</vxe-button>
                            <vxe-button status="danger">危险颜色按钮</vxe-button>
                            <vxe-button status="warning" :disabled="true">警告颜色按钮</vxe-button>
                        </p>
                        <p style="margin-top: 10px;">
                            <vxe-button status="success" icon="fa fa-user">带图标的按钮</vxe-button>
                            <vxe-button :loading=true>加载按钮</vxe-button>
                            <vxe-button round>圆角按钮</vxe-button>
                            <vxe-button circle icon="fa fa-user"></vxe-button>
                        </p>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">单选框</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <vxe-radio-group v-model="habit">
                                <vxe-radio label="1" content="HTML" disabled></vxe-radio>
                                <vxe-radio label="2" content="CSS"></vxe-radio>
                                <vxe-radio label="3" content="Javascript"></vxe-radio>
                                <vxe-radio label="4" content="SASS"></vxe-radio>
                                <vxe-radio label="5" content="LESS"></vxe-radio>
                            </vxe-radio-group>
                        </p>
                        <p style="margin-top: 10px;">
                            <vxe-radio-group v-model="habit">
                                <vxe-radio-button label="1" content="吃饭" disabled></vxe-radio-button>
                                <vxe-radio-button label="2" content="睡觉"></vxe-radio-button>
                                <vxe-radio-button label="3" content="走路"></vxe-radio-button>
                                <vxe-radio-button label="4" content="跑步"></vxe-radio-button>
                                <vxe-radio-button label="5" content="喝水"></vxe-radio-button>
                            </vxe-radio-group>
                        </p>
                    </div>
                </div>
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">复选框&开关</h3>
                    </div>
                    <div class="panel-body">
                        <vxe-checkbox-group v-model="school">
                            <vxe-checkbox label="1" content="小学" disabled></vxe-checkbox>
                            <vxe-checkbox label="2" content="初中"></vxe-checkbox>
                            <vxe-checkbox label="3" content="高中"></vxe-checkbox>
                            <vxe-checkbox label="4" content="大学"></vxe-checkbox>
                        </vxe-checkbox-group>
                        <vxe-switch v-model="switch1" size="medium"></vxe-switch>
                        <vxe-switch v-model="switch2"></vxe-switch>
                        <vxe-switch v-model="switch3" open-label="开" close-label="关" disabled></vxe-switch>
                        <vxe-switch v-model="switch4" open-icon="fa fa-check" close-icon="fa fa-close"></vxe-switch>
                        <vxe-switch v-model="switch5" open-value="1" close-value="0" open-icon="fa fa-check"
                                    close-icon="fa fa-close"></vxe-switch>
                    </div>
                </div>
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">输入框</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <vxe-input placeholder="默认的输入框" v-model="week"></vxe-input>
                            <vxe-input placeholder="中等的输入框" v-model="month" size="medium"></vxe-input>
                            <vxe-input placeholder="带清除的输入框" v-model="quarter" size="medium" clearable></vxe-input>
                            <vxe-input placeholder="带图标的输入框" prefix-icon="fa fa-user" suffix-icon="fa fa-remove"
                                       v-model="input1"
                                       size="medium" clearable></vxe-input>
                            <vxe-input placeholder="只读的输入框" prefix-icon="fa fa-user" suffix-icon="fa fa-remove"
                                       v-model="input1"
                                       size="medium" clearable readonly></vxe-input>
                            <vxe-input placeholder="禁用的输入框" prefix-icon="fa fa-user" suffix-icon="fa fa-remove"
                                       v-model="input1"
                                       size="medium" clearable disabled></vxe-input>
                        </p>
                        <p style="margin-top: 10px;">
                            <vxe-input v-model="input1" placeholder="搜索类型" type="search"></vxe-input>
                            <vxe-input v-model="input1" placeholder="密码类型" type="password" clearable></vxe-input>
                            <vxe-input v-model="date" placeholder="日期选择" type="date" clearable></vxe-input>
                            <vxe-input v-model="week" placeholder="周选择" type="week" clearable></vxe-input>
                            <vxe-input v-model="month" placeholder="月选择" type="month" clearable></vxe-input>
                            <vxe-input v-model="quarter" placeholder="季选择" type="quarter" clearable></vxe-input>
                        </p>
                        <p style="margin-top:10px;">
                            <vxe-input v-model="time" placeholder="时间选择" type="time" clearable></vxe-input>
                            <vxe-input v-model="datetime" placeholder="日期时间选择" type="datetime" clearable></vxe-input>
                            <vxe-input placeholder="数值选择" type="number" v-model="number" clearable></vxe-input>
                            <vxe-input placeholder="小数" type="float" v-model="float" clearable></vxe-input>
                            <vxe-input placeholder="整数" step="2" type="integer" v-model="integer" clearable></vxe-input>
                            <vxe-input placeholder="最小值最大值" min="-10" max="10" type="integer" v-model="integer"
                                       clearable></vxe-input>
                        </p>
                    </div>
                </div>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">文本域</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <vxe-textarea v-model="textarea" placeholder="请输入文字" size="medium"></vxe-textarea>
                            <vxe-textarea v-model="textarea" placeholder="请输入文字" readonly></vxe-textarea>
                            <vxe-textarea v-model="textarea" placeholder="请输入文字" disabled></vxe-textarea>
                            <vxe-textarea :autisize="{minRows:2,maxRows:10}" v-model="textarea" placeholder="请输入文字"
                                          maxlength="100"
                                          show-word-count></vxe-textarea>
                        </p>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">下拉框</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <vxe-select v-model="select1" size="medium">
                                <vxe-option v-for="s in select1s" :key="s.name" :value="s.value"
                                            :label="s.name"></vxe-option>
                            </vxe-select>
                            <vxe-select v-model="select1" size="medium" prefix-icon="fa fa-user" clearable>
                                <vxe-option v-for="s in select1s" :key="s.name" :value="s.value"
                                            :label="s.name"></vxe-option>
                            </vxe-select>
                            <vxe-select v-model="select1" size="medium" prefix-icon="fa fa-user" clearable disabled>
                                <vxe-option v-for="s in select1s" :key="s.name" :value="s.value"
                                            :label="s.name"></vxe-option>
                            </vxe-select>
                            <vxe-select placeholder="多选" v-model="select2" size="medium" prefix-icon="fa fa-user"
                                        clearable multiple
                                        :loading="load">
                                <vxe-option v-for="s in select1s" :key="s.name" :value="s.value"
                                            :label="s.name"></vxe-option>
                            </vxe-select>
                        </p>
                    </div>
                </div>
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">工具栏</h3>
                    </div>
                    <div class="panel-body">
                        <vxe-button @click="modal = true">完整功能的窗口（移动、拖动、状态保存）</vxe-button>
                        <vxe-modal v-model="modal" id="myModal6" width="800" height="400" min-width="460"
                                   min-height="320" show-zoom
                                   resize remember storage transfer>
                            <template #title>
                                <span style="color: red;">完整功能的窗口（移动、拖动、状态保存）</span>
                                <span style="color: red;">通过设置 transfer 将弹框容器插入 body</span>
                            </template>
                            <template #default>
                                哈哈哈
                            </template>
                        </vxe-modal>
                    </div>
                </div>
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            表格
                            <vxe-button status="danger" @click="$refs.xTable1.setRadioRow(tableData[1]);">设置单选第二行选中
                            </vxe-button>
                            <vxe-button status="success" @click="getRadioRow();">获取单选选中行数据</vxe-button>
                            <vxe-button status="info" @click="clearRadioRowEevnt">单选取消选中</vxe-button>
                            <vxe-button status="warning" @click="$refs.xTable1.toggleCheckboxRow(tableData[1])">
                                设置多选第二行选中
                            </vxe-button>
                            <vxe-button status="success"
                                        @click="$refs.xTable1.setCheckboxRow([tableData[2],tableData[3]],true)">
                                设置多选第三、第四行选中
                            </vxe-button>
                            <vxe-button status="primary" @click="$refs.xTable1.setAllCheckboxRow(true)">设置多选选中所有行
                            </vxe-button>
                            <div style="margin-top: 10px;"></div>
                            <vxe-button status="danger" @click="$refs.xTable1.clearCheckboxRow()">多选清除选中</vxe-button>
                            <vxe-button status="info" @click="getCheckboxRows();">多选获取选中行</vxe-button>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <vxe-table :align="allAlign" :data="tableData" border show-header-overflow stripe show-overflow
                                   highlight-hover-row highlight-current-row round resizable ref="xTable1"
                                   @radio-change="radioChangeEevent"
                                   @checkbox-change="checkboxChanEevent" empty-text="没有更多数据了！" :loading="false">
                            <vxe-column type="radio" width="60"></vxe-column>
                            <vxe-column type="checkbox" width="60"></vxe-column>
                            <vxe-column field="name" title="姓名" sortable fixed="left"></vxe-column>
                            <vxe-column field="nick" title="昵称"></vxe-column>
                            <vxe-column field="gender" title="性别" :filters="[{value:1,label:'男'},{value:2,label:'女'}]"
                                        :formatter="formatterGender"></vxe-column>
                            <vxe-column field="address" title="地址" type="html"></vxe-column>
                        </vxe-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Desktop',
    data () {
        return {
            habit: 4 + '',
            school: [2 + '', 4 + '', '1'],
            switch1: true,
            switch2: false,
            switch3: false,
            switch4: false,
            switch5: '0',
            input1: '',
            date: '',
            week: '',
            month: '',
            quarter: '',
            time: '',
            datetime: '',
            number: '',
            float: '',
            integer: '',
            textarea: '',
            select1: '张三',
            select1s: [{
                name: '张三',
                value: 12
            }, {
                name: '李四',
                value: 15
            }, {
                name: '王五',
                value: 9
            }],
            select2: [],
            load: true,
            modal: false,
            allAlign: 'center',
            tableData: [{
                id: 10002,
                name: '张三',
                nick: '三儿',
                gender: 1,
                address: '昆明市昆明市昆明市昆明市昆明市昆明市昆明市昆明市'
            },
                {
                    id: 20002,
                    name: '李四',
                    nick: '四儿',
                    gender: 2,
                    address: '昆明市'
                },
                {
                    id: 30003,
                    name: '王五',
                    nick: '五儿',
                    gender: 1,
                    address: '昆明市'
                },
                {
                    id: 40004,
                    name: '赵六',
                    nick: '六儿',
                    gender: 2,
                    address: '昆明市'
                },
                {
                    id: 50005,
                    name: '田七',
                    nick: '七儿',
                    gender: 1,
                    address: '<img height="40" src="https://x-extends.github.io/vxe-table/static/other/img1.gif">'
                }
            ]
        }
    },
    mounted () {
        setTimeout(() => {
            this.load = false
        }, 2000)
    },
    methods: {
        message () {
            // this.$XModal.message({ content: '普通提示' });//普通提示
            // this.$XModal.message({ content: '信息提示',status:'info' });//信息提示
            // this.$XModal.message({ content: 'success消息提示',status:'success' });//信息提示
            // this.$XModal.message({ content: 'warning消息提示',status:'warning' });//信息提示
            // this.$XModal.message({ content: 'error消息提示',status:'error' });//信息提示
            // this.$XModal.message({ content: 'load消息提示',status:'loading' });//信息提示

            // this.$XModal.alert({ content: 'error消息提示',status:'error' ,iconStatus:"fa fa-gear"});//信息提示

            // this.$XModal.confirm({ content: 'error消息提示',status:'error' ,iconStatus:"fa fa-gear"}).then(res=>{
            // console.log(res);
            // })
            // this.$XModal.open({ content: 'error消息提示',status:'error' ,iconStatus:"fa fa-gear"});
        },
        getRadioRow () {
            // 表格 获取单选框选中的行
            let obj = this.$refs.xTable1.getRadioRecord()
            console.log(obj)
        },
        clearRadioRowEevnt () {
            // 清除单选框选中状态事件
            this.$refs.xTable1.clearRadioRow()
        },
        radioChangeEevent (row) {
            // 表格单选选中改变
            console.log(row.oldValue)
            console.log(row.newValue)
        },
        getCheckboxRows () {
            // 表格 获取多选选中的行
            let obj = this.$refs.xTable1.getCheckboxRecords()
            console.log(obj)
        },
        checkboxChanEevent (row) {
            // 多选选中改变事件
            console.log(row.records) // 选中的行
            console.log(row.row) // 操作的行
        },
        formatterGender (rows) {
            // 表格 格式化行
            console.log(rows.row)
            if (rows.row.gender === 1) {
                return '男'
            } else if (rows.row.gender === 2) {
                return '女'
            }
            return '未知'
        }
    }
}
</script>
<style>

</style>
